<template>
  <el-dialog
    :title="rowDataList.subject"
    :visible.sync="dialogVisible"
    width="40%"
    append-to-body
    :close-on-click-modal="false"
    :before-close="handleClose">
    <div class="content">
      <!-- <h3 class="title">{{rowDataList.subject}}</h3> -->
      <p class="date">{{rowDataList.startTime}} - {{rowDataList.endTime}}</p>
      <p class="meetingCode">会议号：{{rowDataList.meetingCode}}</p>
      <p class="promoter">发起人：{{rowDataList.promoter}}</p>
      <div class="participantNumber">参会人：<p class="participants" v-for="item,index in rowDataList.participants" :key="index">{{item.userName}} </p></div>
      <p class="promoter">参会时长：{{rowDataList.duration}}</p>
      <div v-if="rowDataList.isRecording">
        会议录制视频列表：<br/>
        <!-- <el-button size="small" v-for="item,index in rowDataList.records" :key="index" @click="open(item)">录制视频{{index+1}}</el-button> -->

        <p v-for="item,index in rowDataList.records" :key="index" >录制视频{{index+1}}： <i class="el-icon-download"
style="color: #3add7d;
    font-size: 0.16rem;
    cursor: pointer;"
@click="open(item)"></i></p>
      </div>
      文件列表：<br/><p v-for="item,index in rowDataList.docs" :key="index">上传人{{index+1}}：{{item.docCreatorUserName}}<br/>文件标题{{index+1}}：{{item.docTitle}}</p>

    </div>
  </el-dialog>
</template>

<script>
import * as API from '../../../../api/emergency/index'
export default {
  props: {
    isShowCheck: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialogVisible: this.isShowCheck.CheckConferenceVisible,
      rowDataList: {}
    }
  },
  mounted() {
    this.getMeetingRecord()
  },
  methods: {
    open(item) {
      window.open(item.downloadAddress)
    },
    handleClose() { this.$emit('handleClose') },
    getMeetingRecord() {
      API.getMeetingRecord(this.isShowCheck.rowData.id).then(res => {
        if (res.code === 200) {
          this.rowDataList = res.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-dialog){
  background: rgba(3,27,54,0.7);
}
:deep(.el-dialog__title){
  color: #fff;
}
:deep(.el-dialog__body){
  color: #fff;
}
.content{
  .participantNumber{
    display: flex;
    .participants{
      // 添加一个伪元素 /
      &:after{
        content:'、';
      }
      &:last-child { // 找到最后一个名字元素
        &:after{    // 将它的伪元素清空
          content:'';
        }
      }
    }
  }
}
</style>
